<!DOCTYPE html>
<html lang="zh-CN">
<!--李萧纹 算机2203-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>熙心健康体检系统 - 体检客户查询</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", sans-serif;
    }

    body {
      background-color: #f5f7fa;
      display: flex;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 200px;
      background-color: #2f3b4b;
      color: #fff;
      min-height: 100vh;
    }

    .sidebar-header {
      padding: 20px;
      font-size: 18px;
      background-color: #242e3b;
    }

    .sidebar-nav {
      list-style: none;
    }

    .sidebar-nav li {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .sidebar-nav li:hover {
      background-color: #3a4756;
    }

    .sidebar-nav li.active {
      background-color: #1f2730;
    }

    .sidebar-nav a {
      color: #fff;
      text-decoration: none;
    }

    /* 主体内容样式 */
    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }


    .card {
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
	
	.cardto{
		padding: 15px 20px;
		font-size: 12px;
		font-weight: normal;
		border-bottom: 0px solid #eee;
	}

    .card-header {
      padding: 15px 20px;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
    }

    .form-fields {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .field-group {
      display: flex;
      flex-direction: column;
      width: calc(33.333% - 20px);
    }

    .field-group.full-width {
      width: 100%;
    }

    .field-group label {
      margin-bottom: 5px;
      font-size: 14px;
      color: #666;
    }

    .field-group input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .field-group input[disabled] {
      background-color: #f5f5f5;
      cursor: not-allowed;
    }

    .normal-range {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }

    .tag {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-left: 5px;
    }

    .tag.danger {
      background-color: #f56c6c;
      color: #fff;
    }

    .collapse {
      border: 1px solid #eee;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .collapse-item {
      border-bottom: 1px solid #eee;
    }

    .collapse-item:last-child {
      border-bottom: none;
    }

    .collapse-header {
      padding: 15px 20px;
      cursor: pointer;
      background-color: #fafafa;
      font-weight: bold;
    }

    .collapse-content {
      padding: 20px;
      display: none;
    }

    .collapse-content.show {
      display: block;
    }
  </style>
</head>

<body>
  <!-- 侧边栏 -->
  <aside class="sidebar">
    <div class="sidebar-header">熙心健康体检系统</div>
    <ul class="sidebar-nav">
      <li>首页</li>
      <li>体检预约</li>
      <li>预约列表</li>
      <li class="active">体检客户查询</li>
    </ul>
  </aside>

  <!-- 主体内容 -->
  <div class="main-content">
	  <!-- 查询区域 -->
	  <div class="search-section">
	  <div class="cardto">体检信息录入</div>
		<div class="card-header">体检信息查询</div>
	    <label for="orderNo">订单编号：</label>
	    <input id="orderNo" v-model="searchNo" placeholder="输入体检编号">
	    <button @click="fetchCustomerInfo">查询</button>
	  </div>
    <!-- 客户基本信息 -->
    <div class="card">
      <div class="card-header">客户基本信息</div>
      <div class="form-fields">
        <div class="field-group">
          <label>订单编号</label>
          <input type="text" value="202310253212565" disabled>
        </div>
        <div class="field-group">
          <label>手机号码</label>
          <input type="text" value="213100000000" disabled>
        </div>
        <div class="field-group">
          <label>姓名</label>
          <input type="text" value="张一山" disabled>
        </div>
        <div class="field-group">
          <label>性别</label>
          <input type="text" value="女" disabled>
        </div>
        <div class="field-group">
          <label>套餐类型</label>
          <input type="text" value="23东家秋寒已增女士套餐D" disabled>
        </div>
        <div class="field-group">
          <label>体检日期</label>
          <input type="text" value="2023-10-12" disabled>
        </div>
      </div>
    </div>

    <!-- 检查录入 -->
    <div class="card">
      <div class="card-header">检查录入</div>
      <!-- 一般检查基础项目 -->
      <div class="collapse">
        <div class="collapse-header" onclick="toggleCollapse('general')">一般检查基础项目</div>
        <div class="collapse-content" id="generalContent">
          <div class="form-fields">
            <div class="field-group">
              <label>身高</label>
              <input type="text" placeholder="请输入身高">
              <div class="normal-range">正常范围值：-</div>
            </div>
            <div class="field-group">
              <label>体重</label>
              <input type="text" placeholder="请输入体重">
              <div class="normal-range">正常范围值：-</div>
            </div>
            <div class="field-group">
              <label>体重指数</label>
              <input type="text" value="22.9" disabled>
              <div class="normal-range">正常范围值：-</div>
              <span class="tag danger">异</span>
            </div>
            <div class="field-group">
              <label>脉搏</label>
              <input type="text" placeholder="请输入脉搏">
              <div class="normal-range">正常范围值：-</div>
            </div>
            <div class="field-group">
              <label>收缩压</label>
              <input type="text" placeholder="请输入收缩压">
              <div class="normal-range">正常范围值：-</div>
            </div>
            <div class="field-group">
              <label>舒张压</label>
              <input type="text" placeholder="请输入舒张压">
              <div class="normal-range">正常范围值：-</div>
            </div>
            <div class="field-group full-width">
              <label>科室小结</label>
              <input type="text" placeholder="科室小结：超重">
            </div>
            <div class="field-group">
              <label>录入医师</label>
              <input type="text" placeholder="请输入录入医师">
            </div>
            <div class="field-group">
              <label>责任医师</label>
              <input type="text" placeholder="请输入责任医师">
            </div>
          </div>
        </div>
      </div>
      <!-- 视力+辨色力 -->
      <div class="collapse">
        <div class="collapse-header" onclick="toggleCollapse('vision')">视力+辨色力</div>
        <div class="collapse-content" id="visionContent">
          <div class="form-fields">
            <div class="field-group">
              <label>色觉检查</label>
              <input type="text" placeholder="输入正确数据">
            </div>
            <div class="field-group">
              <label>右眼裸眼视力</label>
              <input type="text" placeholder="请输入右眼裸眼视力">
              <div class="normal-range">正常范围值：5.0-5.2</div>
            </div>
            <div class="field-group">
              <label>左眼裸眼视力</label>
              <input type="text" placeholder="请输入左眼裸眼视力">
              <div class="normal-range">正常范围值：5.0-5.2</div>
            </div>
            <div class="field-group">
              <label>右眼矫正视力</label>
              <input type="text" placeholder="请输入右眼矫正视力">
              <div class="normal-range">正常范围值：-0</div>
            </div>
            <div class="field-group">
              <label>左眼矫正视力</label>
              <input type="text" placeholder="请输入左眼矫正视力">
              <div class="normal-range">正常范围值：-0</div>
            </div>
            <div class="field-group full-width">
              <label>科室小结</label>
              <input type="text" placeholder="科室小结：双眼屈光不正" >
            </div>
            <div class="field-group">
              <label>录入医师</label>
              <input type="text" placeholder="请输入录入医师姓名">
            </div>
            <div class="field-group">
              <label>责任医师</label>
              <input type="text" placeholder="请输入责任医师姓名">
            </div>
          </div>
        </div>
      </div>
      <!-- 血常规24项 -->
      <div class="collapse">
        <div class="collapse-header" onclick="toggleCollapse('blood')">血常规24项</div>
        <div class="collapse-content" id="bloodContent">
          <p>血常规24项内容...</p >
        </div>
      </div>
      <!-- 肝功四项 -->
      <div class="collapse">
        <div class="collapse-header" onclick="toggleCollapse('liver')">肝功四项</div>
        <div class="collapse-content" id="liverContent">
          <p>肝功四项内容...</p >
        </div>
      </div>
	  <div class="collapse">
	    <div class="collapse-header" onclick="toggleCollapse('kidney')">肾功能三项</div>
	    <div class="collapse-content" id="kidneyContent">
	      <p>肾功能三项录入页面</p >
	    </div>
	  </div>
	  <div class="collapse">
	    <div class="collapse-header" onclick="toggleCollapse('bloodfat')">血脂四项</div>
	    <div class="collapse-content" id="bloodfatContent">
	      <p>血脂四项录入页面</p >
	    </div>
	  </div>
	  <div class="collapse">
	    <div class="collapse-header" onclick="toggleCollapse('urine')">尿常规24项</div>
	    <div class="collapse-content" id="urineContent">
	      <p>尿常规24项录入页面</p >
	    </div>
	  </div>
	  <div class="collapse">
	    <div class="collapse-header" onclick="toggleCollapse('carotidartery')">颈动脉彩超</div>
	    <div class="collapse-content" id="carotidarteryContent">
	      <p>颈动脉彩超录入页面</p >
	    </div>
	  </div>
	  <div class="collapse">
	    <div class="collapse-header" onclick="toggleCollapse('head')">头部CT</div>
	    <div class="collapse-content" id="headContent">
	      <p>头部CT录入页面</p >
	    </div>
	  </div>
    </div>
  </div>

  <script>
    // 折叠面板切换函数
    function toggleCollapse(id) {
      const content = document.getElementById(id + 'Content');
      content.classList.toggle('show');
    }
  </script>
</body>

</html>